<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Insert title here</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		
		#stock {
			width: 300px;
			background-color: skyblue;
			float: right;
			margin: 10px;
		}
		#stock_info {
			width: 218px;
			margin: 10px auto;
			
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	<script type="text/javascript">
		$(function() {
			setInterval(stock_info, 1000);
		});
		
		function stock_info() {
			$.ajax({
				"url" : "/ajax02/stock.do", 
				"type" : "get",
				"dataType" : "json",
				"success" : function(data) {
					// 处理服务器返回的数据，参数data可以随便写，这个参数就代表服务器发过来的数据
					// 注意：jquery 的 $.ajax方法 会自动将json字符串转换成js对象/js数组，前提是必须指定号 dataType属性
					
					// 更新tobody前先将其清空
					// $("tbody").empty(); 
					$("tbody").html("");
					// 更新tbody
					for(var i = 0; i < data.length; i++) {
						var stock = data[i];
						$("tbody").append(
							"<tr><td>"+stock.code+"</td><td>"+stock.name+"</td><td>"+stock.price+"</td></tr>"		
						);
					}
				}
			});
		}
	</script>
</head>
<body>
	<div id="stock">
		<div id="stock_info">
			<table border="1px">
			<caption>股票信息</caption>
			<thead>
				<tr>
					<td>股票代码</td>
					<td>股票名称</td>
					<td>股票价格</td>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		</div>
	</div>
</body>
</html>